<script setup lang="ts">
import AppMain from '@/components/AppMain.vue'
import { getSupportedPlatforms, convertPlatform2Name } from '../../util/projectUtil';
import { ref, watchEffect } from 'vue';
import { useSelectedPlatformsSetting } from '../../events/settings';
import { useI18n } from 'vue-i18n';
import { useTitle } from '@/events/title';

const { t } = useI18n()
useTitle(t('settings.name'))

const platforms = getSupportedPlatforms()
const platformsList = platforms.map(function (platform) {
  return [platform, convertPlatform2Name(platform)]
})

const selectedPlatforms = useSelectedPlatformsSetting()
const selectedPlatformNames = ref<string[]>([])
watchEffect(() => {
  selectedPlatformNames.value = selectedPlatforms.value.map(function (platform) {
    return convertPlatform2Name(platform)
  })
})

const version = __VERSION__
</script>

<template>
  <v-app-bar flat border="b">
    <v-btn icon="mdi-arrow-left" @click.stop="$router.back" />
    <v-app-bar-title>{{ $t('settings.name') }}</v-app-bar-title>
  </v-app-bar>
  <app-main>
    <v-container class="container">
      <v-list lines="two" active-class="noActivatedOverlay">
        <!-- 项目展示 -->
        <v-list-subheader>{{ $t('project.showcase.name') }}</v-list-subheader>
        <!-- 展示的平台 -->
        <v-list-item prepend-icon="mdi-tablet-cellphone" class="noActivatedOverlay"
          :title="$t('project.showcase.platforms')" :subtitle="selectedPlatformNames.join(', ')" link>
           <!-- origin="left" 修复小窗时定位错误 -->
          <v-menu activator="parent" :close-on-content-click="false">
            <v-list select-strategy="classic" v-model:selected="selectedPlatforms" mandatory
              active-class="noActivatedOverlay">
              <v-list-item v-for="[value, name] in platformsList" :key="value" :title="name" :value="value" >
                <template v-slot:prepend="{ isActive }">
                  <v-list-item-action start>
                    <v-checkbox-btn :model-value="isActive" readonly></v-checkbox-btn>
                  </v-list-item-action>
                </template>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-list-item>
        <!-- 应用 -->
        <v-divider></v-divider>
        <v-list-subheader>{{ $t('app.name') }}</v-list-subheader>
        <!-- 关于 -->
        <v-list-item prepend-icon="mdi-information-outline" :title="$t('about.name')" :subtitle="version"
          :to="{ name: 'About' }" append-icon="mdi-chevron-right">
        </v-list-item>
      </v-list>
    </v-container>
  </app-main>
</template>

<style scoped>
.container {
  padding: 0;
}
</style>
